<style type="text/css">
#my_images_choose .modal-dialog { width: 900px; }
#my_images_choose .modal-body { padding: 12px 0; }
#my_images_choose #images_list { height: 400px; overflow: auto; position: relative; }
#my_images_choose .spinner { zoom: 1.8; position: absolute; top: 50%; margin-top: -15px; left: 0; right: 0; z-index: 1; }
#my_images_choose .img_detail { position: relative; width: 32%; display: inline-block; margin-left: 6px; margin-bottom: 6px; height: 200px; float: left; overflow: hidden; }
#my_images_choose .img_detail img { width: 100%; height: 100%; object-fit: cover; transition: all .5s ease; -webkit-transition: all .5s ease; }
#my_images_choose .img_detail .mask { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, .4); opacity: 0; transition: all .5s ease; -webkit-transition: all .4s ease; cursor: pointer; }
#my_images_choose .img_detail:hover .mask+img { transform: scale(1.3); -webkit-transform: scale(1.3); }
#my_images_choose .img_detail:hover .mask { opacity: 1; z-index: 1; }
#my_images_choose .img_detail.selected .mask { opacity: 1; cursor: default; z-index: 1; }
#my_images_choose .mask .ok_icon { position: absolute; font-size: 40px; top: 50%; text-align: center; width: 100%; margin-top: -23px; color: #fff; }
#my_images_choose .modal-footer { text-align: center; }
#my_images_choose .modal-footer .btn { width: 100px; }
</style>
<include file="./Application/Home/View/Common/backup/util_my_images_choose.html" />
<script type="text/javascript">
(function(){
    var $me = $('#my_images_choose');
    var size = 20,
        pageNo = 1;
    var isLoading = 0,
        isNoData = 0;

    $me.on('shown.bs.modal', function() {
        if ($('#images_list .img_detail', this).length) return;
        ajaxRequest();

    }).on('click', '.img_detail', function(){
        $(this).addClass('selected').siblings().removeClass('selected');
    }).find('#images_sure').on('click', function() {

        var selected = $('.img_detail.selected', $me);
        
        if (selected.length) {

            if (typeof window.imagesChooseCallback === 'function') {
                window.imagesChooseCallback.call($me, $('img', selected).attr('src') || '');
            }
            $me.modal('hide');
        } else {
            ShowTitleMessage.showWarning('请选择一个图片', showTime);
        }
    });

    $('#images_list', $me).scrollMax(function(){

        if (!isLoading && !isNoData) {

            pageNo ++;
            ajaxRequest();

        }

    });

    function ajaxRequest(fn) {
        isLoading = 1;
        $('.spinner', $me).show();
        $.ajax({
            type: 'post',
            url: BIGWE_API.COMMON.GET_MATERIAL_IMAGES,
            data: {
                size: size,
                start: (pageNo - 1) * size
            },
            success: function(data) {
                data = typeof data === 'string' ? $.parseJSON(data) : data;
                if (data.ret) {
                    ShowTitleMessage.showWarning(data.msg || '未知的错误', showTime);
                    return;
                }
                if (!data.data.length) {
                    ShowTitleMessage.showWarning('没有数据了', showTime);
                    isNoData = 1;
                    return;
                }
                
                var appendHtml = '';

                for(i in data.data) {
                    $('#images_list', $me).append(getImagesHtml(wechartImgCheck(data.data[i].image)));
                }

                if (fn) {
                    fn.call($me);
                }
                
            },
            complete: function(){
                isLoading = 0;
                $('.spinner', $me).hide();
            }
        });
    }

    function getImagesHtml(videoURL) {
        
        var html = '';
        html += '<div class="img_detail">';
        html += '<div class="mask"><span class="glyphicon glyphicon-ok ok_icon"></span></div>';
        html += '<img src="' + videoURL + '">';
        html += '</div>';

        return html;
    }
}());
</script>